<template>
    <view>
		<view v-if="ini.personal > 0"><view @click="exitPool()" class="w102 h32 m-b-10 view align-center justify-center fz-16 c_fff bor-rad19 bg_678">解押贡献值</view></view>
        <view :style="`background-image:url(${require('@/static/img3/myasset_banner.png')});border-radius:30rpx;`" class="bg-cover p-l-20 p-r-20 p-t-20 p-b-20 m-b-20">
            <view class="view m-b-22">
				<view class="view flex-row align-start justify-between">
					<view class="c-fff fz-14">待领取收益</view>
					<el-button @click="toRecord()" class=" bddctn" block>查看记录</el-button>
					<el-button @click="takeRward()" class=" bddctn" block>领取收益</el-button>
				</view>
                <view class="m-t-5">
					<view class="fz-22 c-fff bold">{{ini.earn}} {{awardToken}}</view>
                   
                </view>
            </view>
            <view class="view flex-row align-start justify-between">
				<view>
					<view class="c-fff fz-14">全网贡献值</view>
					<view class="fz-22 c-fff bold m-t-5">{{ ini.total }}</view>
				</view>
				<view class="text-right">
					<view class="c-fff fz-14">我的贡献值</view>
					 <view class="fz-22 c-fff bold m-t-5">{{ ini.personal }}</view>
				</view>
            </view>
        </view>
		<!-- 领取收益 -->
		<confirmWallet ref="take" token="CHB" :openType="4" :params="confirmData" @confirm="confirmTake" />
		<!-- 退出贡献池 -->
		<confirmWallet ref="exit" token="CHB" :openType="5" :params="confirmData" @confirm="confirmExit" />
    </view>
</template>

<script>
import { getCalcListData } from '@/apis/pool'
import {doExit,doEarn} from "@/apis/pool.js";
import confirmWallet from '@/components/confirmWallet/index.vue'

export default {
    components: {
		confirmWallet
	},
    props: ['basicid'],
    computed: {
	},
    data() {
        return {
            ini: {earn:0,personal:0},
			awardToken: 'DSX',
			confirmData: {},
			openType:4,
        }
    },
	onShow() {
	  
	},
    watch: {
        basicid: {
        　　handler(newVal,oldVal) {
            this.getCompuing()  
        　　},
    　　	immediate: true
        }
    },
    methods: {
        reload() {
            this.getCompuing() 
        },
        async getCompuing() {
            if (this.basicid) {
                const res = await getCalcListData({basic_id: this.basicid})
                this.ini = res.data
				if(this.basicid == 2){
					this.awardToken = 'CHB'
				}
				this.confirmData.basic_id = this.basicid;
            }   
        },
		takeRward(){
			if(this.ini.earn == 0){
				uni.showToast({
				  title: '当前并无收益可以提取',
				  icon: 'none'
				})
				return
			}
			this.$refs.take.onShowDialog()
		},
		exitPool(){
			let title;
			if(this.basicid == 2){
				title = '确认退出CHB贡献池\r\n只退回NFT，通证已销毁'
			}else{
				title = "确认退出DSX贡献池\r\n退回NFT与通证"
			}
			uni.showModal({
				title: '再次确认',
				content: title,
				cancelText: "取消",
				confirmText: "确认退出",
				confirmColor: '#6781FF',
				cancelColor: '#9E9E9E',
				success: async (res)  => {
					if (res.confirm) {
					  this.$refs.exit.onShowDialog()
					}
				}
			});
		},
		async confirmTake(){
			if(this.ini.earn == 0){
				uni.showToast({
				  title: '当前并无收益可以提取',
				  icon: 'none'
				})
				return
			}
			uni.showLoading()
			console.log('back param',this.confirmData)
			const res = await doEarn(this.confirmData)
			uni.hideLoading()
			uni.showToast({title: res.message, icon: 'none'})
			if (res.code == 0) {
			    this.$refs.take.onClose()
				this.reload();
			}
		},
		async confirmExit(){
			if(this.ini.personal.earn == 0){
				uni.showToast({
				  title: '当前并无贡献可以退出',
				  icon: 'none'
				})
				return
			}
			uni.showLoading()
			console.log('back param',this.confirmData)
			const res = await doExit(this.confirmData)
			uni.hideLoading()
			uni.showToast({title: res.message, icon: 'none'})
			if (res.code == 0) {
			    this.$refs.take.onClose()
				this.reload();
			}
		},	
		toRecord(){
			uni.navigateTo({
			  url: '/pages/my/profitsRecord/index?basic_id=' + this.basicid
			})
		}
    }
    
};
</script>

<style lang="scss" scoped>
.bddctn {
    height: 46rpx !important;
    width: 180rpx !important;
    font-size: 28rpx !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 0 !important;
    border-radius: 20rpx !important;
}
</style>
